<template>
    <div class="repairDetail">
        <list>
        <cell class="item">
            <div class="menutitle" @click="toggleG">
                <text class="line"></text><text class="text">故障维修订单详情</text>
            </div>
            <div class="sildermun" v-if="statusG">
                <ul class="list">
                    <li class="listItem">
                        <text class="textTitle">报修序号:</text>
                        <text class="value">{{tabList.WXQH_ID}}</text>
                    </li>
                    <li class="listItem">
                        <text class="textTitle">处理状态:</text>
                        <text class="value">{{tabList.JZCLJG}}</text>
                    </li>
                    <li class="listItem">
                        <text class="textTitle">详细地址:</text>
                        <text class="value">{{tabList.XXDZ}}{{tabList.MPH}}</text>
                    </li>
                    <li class="listItem">
                        <text class="textTitle">报修时间:</text>
                        <text class="value">{{tabList.GZSBSJ}}</text>
                    </li>
                    <li class="listItem">
                        <text class="textTitle">故障情况:</text>
                        <text class="value">{{tabList.JZGZQK}}</text>
                    </li>
                    <li class="listItem">
                        <text class="textTitle">申报人员:</text>
                        <text class="value">{{tabList.GZSBR}}</text>
                    </li>
                    <li class="listItem">
                        <text class="textTitle">设备类型:</text>
                        <text class="value">{{tabList.SBMC}}</text>
                    </li>
                    <li class="listItem">
                        <text class="textTitle">生产厂家:</text>
                        <text class="value">{{tabList.SBCJMC}}</text>
                    </li>
                    <li class="listItem">
                        <text class="textTitle">安装日期:</text>
                        <text class="value">{{tabList.AZRQ}}</text>
                    </li>
                </ul>
            </div>
        </cell>
        <cell class="item">
            <div class="menutitle" @click="toggleE">
                <text class="line"></text><text class="text">故障处理人员信息</text>
            </div>
            <div class="sildermun" v-if="statusE">
                <ul class="list">
                    <li class="listItem">
                        <text class="textTitle">处理人:</text>
                        <text class="value">{{tabList.JZGZCLR}}</text>
                    </li>
                    <li class="listItem">
                        <text class="textTitle">处理人电话:</text>
                        <text class="value">{{tabList.JZCLRDH}}</text>
                    </li>
                    <li class="textareaParent" v-if="isShow">
                        <text class="textTitle">处理措施:</text>
                        <textarea class="textarea" rows="8" placeholder="在此处输入故障处理措施的描述"></textarea>
                    </li>
                </ul>
            </div>
        </cell>
        <cell>
            <wxc-simple-flow :list="testData" :themeColor="themeColor" class="simpleFlow"></wxc-simple-flow>
        </cell>
        </list>
    </div>
</template>
<script>
import WxcSimpleFlow from 'weex-ui/packages/wxc-simple-flow';
import event from '@/net/event'
export default {
    name: 'repairDetail',
    data () {
        return {
            tabList: {},
            statusG: false,
            statusE: false,
            isShow: false,
            datalist: [],
            themeColor: {
                lineColor: 'rgba(62,175,252,1)',
                pointInnerColor: '#fff',
                pointBorderColor: 'rgba(62,175,252,1)',
                highlightTitleColor: 'rgba(62,175,252,1)',
                highlightPointInnerColor: 'rgba(62,175,252,1)',
                highlightPointBorderColor: 'rgba(62,175,252,1)'
            },
            testData: [
                {
                    'date': '',
                    'desc': '',
                    'highlight': false,
                    'title': '故障申报'
                },
                {
                    'date': '',
                    'desc': '',
                    'highlight': false,
                    'title': '故障派单'
                },
                {
                    'date': '',
                    'desc': '',
                    'highlight': false,
                    'title': '故障收单'
                },
                {
                    'date': '',
                    'desc': '',
                    'highlight': false,
                    'title': '故障处理'
                },
                {
                    'date': '',
                    'desc': '',
                    'highlight': false,
                    'title': '完毕'
                }
            ]
        }
    },
    components: {
        WxcSimpleFlow
    },
    beforeCreate(){
        this.$notice.loading.show()
    },
    created(){
        this.$router.getParams().then(resData => {
            event.getRepairsDetails(resData.WXID, '').then(res => {
                this.tabList = res.data.dataitem
                this.datalist = res.data.datalist
                res.data.datalist.map((item, ind) => {
                    this.testData[ind].date = item.WXJLSJ
                    this.testData[ind].title = item.JZCLJG
                    this.testData[ind].highlight = true
                    this.testData[ind].desc = item.JZCLJG + '成功!'
                    if(item.JZCLJG == '完毕') {
                        this.isShow = true
                    }
                    
                })
                this.testData.slice(this.datalist.length, this.testData.length).map(item => {
                    item.desc = '未进行到此步骤!'
                })
                this.$nextTick(() => {
                    this.$notice.loading.hide()
                })
            })
        })
        
    },
    methods: {
        toggleG(){
            this.statusG = !this.statusG
        },
        toggleE(){
            this.statusE = !this.statusE
        }
    }
}
</script>
<style scoped>
.repairDetail{
    width: 750px;
}
.title{
    width: 750px;
    height: 45.8px;
    background-color: #fff;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-right: 15px;
    padding-left: 15px;
}
.line{
    display: block;
    width: 8px;
    height: 15px;
    background-color: rgba(62,175,252,1);
}
.text{
    font-size: 33px;
    font-family:PingFangSC-Regular;
    color:rgba(62,175,252,1);
}
.menutitle{
    width: 750px;
    height: 100px;
    padding-left: 15px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background-color: #fff;
    margin-top: 10px;
}
.listItem{
    width: 750px;
    height: 100px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #f5f5f5;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.line{
    display: block;
    width: 8px;
    height: 25px;
    background-color: rgba(62,175,252,1);
    margin-right: 15px;
}
.sildermun{
    width: 750px;
    margin-top: 10px;
    background-color: #fff;
    padding-left: 20px;
}
.textTitle{
    font-size:29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(102,102,102,1);
    padding-right: 15px;
}
.value{
    font-size: 29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(153,153,153,1);
}
.textareaParent{
    width: 750px;
    flex-direction: row;
}
.textarea{
    width: 550px;
    height: 300px;
    font-size: 29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(153,153,153,1);
}
.simpleFlow{
    margin-top: 10px;
}
</style>
